<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>弹性盒模型</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul{
            list-style: none;
        }

        /*
            主轴
                - 主轴就是弹性子元素排列方向
                - 如何设置主轴方向：
                    flex-direction
                        可选值：
                            row 主轴是自左向右水平排列
                            column 主轴是自上向下垂直排列
                            row-reverse 主轴是自右向左水平排列
                            column-reverse 主轴是自下向上垂直排列
                 - 设置元素是否换行
                    flex-wrap
                        可选值：
                            nowrap 元素不会自动换行
                            wrap 自动换行
                            wrap-reverse 反向换行

                    flex-flow：
                        flex-direction 和 flex-wrap的简写属性
                            可以同时设置两个样式并且没有顺序和数量的要求

            侧轴（辅轴）
                - 侧轴是与主轴垂直方向的轴





        */

        ul{
            display: flex;
            width: 300px;
            height: 800px;
            border: 10px red solid;
            /*flex-direction: row;*/
            /*flex-wrap: wrap-reverse;*/
            flex-flow: wrap row;

            /*
                justify-content 设置元素在主轴上的对齐方式
                    可选值：
                        start 默认值，元素靠主轴起始位置对齐
                        end 元素靠主轴的结束位置对齐
                        center 沿主轴方向居中对齐
                        space-between 将主轴方向空白位置分配到两个元素之间
                        space-around 将主轴方向空白位置分配到元素周围
                        space-evenly 将主轴方向的空白分配到元素的一侧
                align-items 设置元素在侧轴上的对齐方式
                       stretch 拉伸，元素会自动拉伸将侧轴撑满
                       start 元素靠侧轴的起始位置对齐
                       end 元素靠侧轴的结束位置对齐
                       center 元素在侧轴上居中对齐
                align-content 设置元素在侧轴上空白空间的分配
                        space-between 将侧轴方向空白位置分配到两个元素之间
                        space-around 将侧轴方向空白位置分配到元素周围
                        space-evenly 将侧轴方向的空白分配到元素的一侧


                元素居中的方式：
                    1. 利用margin:0 auto来实现水平居中
                    2. 利用定位来实现水平和垂直居中
                    3. 利用弹性盒来实现水平和垂直居中

            */
            /*justify-content: space-evenly;*/
            align-items: start;
            align-content: space-evenly;
        }


        li{
            width: 100px;
            line-height: 100px;
            font-size: 50px;
            color: #fff;
            text-align: center;

            flex-shrink: 0;
        }

        li:nth-child(1){
            background-color: #bfa;
        }

        li:nth-child(2){
            background-color: orange;
        }

        li:nth-child(3){
            background-color: yellowgreen;
        }

        li:nth-child(4){
            background-color: tomato;
        }

        li:nth-child(5){
            background-color: skyblue;
        }

        .box1{
            width: 300px;
            height: 300px;
            border: 10px orange solid;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box2{
            width: 100px;
            height: 100px;
            background-color: tomato;
        }
    </style>
</head>
<body>
<!--
    弹性盒是CSS3中新添加的布局方式，通过它可以更加方便完成我们对网页的布局
        通过弹性盒模型，可以便捷完成网页中的各种布局
-->

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

<div class="box1">
    <div class="box2"></div>
</div>

</body>
</html>